<template>
  <div class="bookList">
    <el-table
      v-loading="loading"
      ref="bookTable"
      :data="bookData"
      tooltip-effect="dark"
      border
      style="width: 100%"
      @selection-change='selectChange'
      >
      <el-table-column
        type="selection"
        
       >
      </el-table-column>
      <el-table-column
        align='center'
        label="书名"
        >
        <template slot-scope="scope">{{ scope.row.bookName }}</template>
      </el-table-column>
      <el-table-column
        prop="author"
        align='center'
        label="作者"
       >
      </el-table-column>
      <el-table-column
        prop="bookType"
        label="类型"
        align='center'
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="publicationgDate"
        label="出版日期"
        align='center'
        show-overflow-tooltip>
      </el-table-column>
       <el-table-column
        label="状态"
        align='center'
        show-overflow-tooltip>
        <template slot-scope="scope" >{{ parseInt(scope.row.status)?'借出未还' : '未借' }}</template>
      </el-table-column>
      <el-table-column
        label="操作"
        align='center'
       >
        <template slot-scope="scope">  
          <el-button @click="deletBtn(scope.row)">删除</el-button>
          <el-button @click="reviseBtn(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px;text-align: left;">
      <el-button @click="batchDeletbtn">批量删除</el-button>
    </div>
    <el-dialog title="编辑" :visible.sync="dialogFormVisible" class="dialog-head">
      <el-form :model="editdata">
        <el-form-item label="书名" :label-width="formLabelWidth">
          <el-input v-model="editdata.bookName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="作者名" :label-width="formLabelWidth">
          <el-input v-model="editdata.author" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="发布日期" :label-width="formLabelWidth">
          <el-input v-model="editdata.publicationgDate" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="书籍类型" :label-width="formLabelWidth">
          <el-select v-model="editdata.bookType" placeholder="请选择" class="bookType-select">
            <el-option
              v-for="item in bookTypeList"
              :key="item._id"
              :label="item.bookType"
              :value="item.bookType">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="介绍" :label-width="formLabelWidth">
          <el-input v-model="editdata.introduction" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogdefineBtn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getBookList, batchDeletebooks, deletebook, updatabook } from '@/api/book'
import { getBookTypeList } from '@/api/bookType'
export default {
  name:'bookList',
  data () {
    return {
      loading: true,
      bookData: [],
      selectBook: [],
      dialogFormVisible: false,
      editdata: {},
      formLabelWidth: '120px',
      bookTypeList:[]
    }
  },
  created () {
    this._initbookData()
  },
  methods:{
    _initbookData () {
      this.loading = true
      getBookList().then((res)=> {
        this.loading = false
        let data = res.data
        if(!data.success){
          this.$message({
              message: data.message,
              type: 'warning'
          })
          return
        }
        this.bookData = data.result
      }).catch(err => {
        this.loading = false
        console.log(err)
      })
    },
    _getbookTypeData () {
      getBookTypeList().then((res) => {
        let data = res.data
        if(data.success){
          this.bookTypeList = data.result
        }
      })
    },
    selectChange (selection) {
      this.selectBook = selection
    },
    batchDeletbtn () {
      let selectItem = this.selectBook
      if(selectItem.length === 0){
        this.$message({
              message: '请选择需要删除项',
              type: 'warning'
          })
          return
      }
      batchDeletebooks(selectItem).then(response => {
        console.log(response)
        this._initbookData()
      }).catch(err => {
        console.log('err')
      })
    },
    deletBtn (param) {
      this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deletebook(param).then(response => {
            let result = response.data
            if(result.success){
              this._initbookData()
            }
          }).catch(err => {
          })
        }).catch(() => {
                 
        });
    },
    reviseBtn (param) {
      this.dialogFormVisible = true
      this.editdata = param
      this._getbookTypeData()
    },
    dialogdefineBtn(){
      updatabook(this.editdata).then((respone) => {
        let result = respone.data
        if(result.success){

        }
        this.dialogFormVisible = false
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
  .bookList
    background-color #fff
    border 1px solid transparent
    padding 5px 10px
    .dialog-head
      text-align left
    .bookType-select
      width 100%
    
</style>
